<template>
  <div id="app">
    <van-nav-bar title="节点飞思商城" fixed v-if="!$route.meta.hideHeader" style="z-index:99;background: #fc4a1a;">
      <template #left v-if="['productDetail','recharge','collect','address','addressEdit','order','comment','user'].includes($route.name)">
        <div @click="$router.back()">
          <van-icon name="arrow-left" style="font-size:18px;"/>
          <span class="text">返回</span>
        </div>
      </template>
      <template #right v-if="$route.name=='productDetail'">
        <div style="font-size:18px;" @click="changeShowShare">
          <van-icon name="share-o" />
        </div>
      </template>
    </van-nav-bar>

    <div class="content">
      <router-view />
    </div>

    <van-tabbar v-model="active" v-if="!$route.meta.hideTabber">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/admin">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return ({
      active: 0
    })
  },
  mounted(){
     if(localStorage.getItem('userInfo')) this.$store.state.userId = JSON.parse(localStorage.getItem('userInfo')).id
     if(localStorage.getItem('cartList')) this.$store.state.cartList = JSON.parse(localStorage.getItem('cartList'))
  },
  watch: {
    "$route.name": {
      handler(newVal, oldVal) {
        if (newVal == 'home') {
          this.active = 0
        } else if (newVal == 'category') {
          this.active = 1
        } else if (newVal == 'cart') {
          this.active = 2
        } else if (newVal == 'admin') {
          this.active = 3
        }
      }, 
      deep: true,
      immediate:true,
    }
  },
  mounted(){
    console.log("%c by smile %c 项目作者:xp",
      'color:#fff;background-color:lightcoral;line-height:20px;border-radius: 5px 0 0 5px',
      'color:#fff;background-color:orange;line-height:20px;border-radius: 0 5px 5px 0')

  },
  methods: {
    changeShowShare() {
      this.$bus.$emit('changeShowShare')
    }
  }
}
</script>

<style scoped>
::v-deep .van-nav-bar__left{
    color: #fff;
  }
  ::v-deep .van-nav-bar  .van-icon{
    color:#fff!important;
  }
::v-deep .van-nav-bar__title {
  color: #fff !important;
}
::v-deep .van-swipe__indicator--active{
  background-color:#fc4a1a;
}
::v-deep .van-tabbar-item--active{
  color:#fc4a1a;
}
/* .content{
  padding:0 0 50px 0;
} */
</style>
